<template>
  <div class="top-container">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="pink品邮购商城" name="third">
        <h5 class="title">html css js</h5>
        <iframe
          width="100%"
          height="750px"
          src="http://shop.lianghj.top/#/"
        ></iframe>
      </el-tab-pane>
      <el-tab-pane label="电商后台管理系统 " name="first">
        <h5>vue2 element-ui...</h5>
        <iframe
          width="100%"
          height="750px"
          src="http://admin.lianghj.top/#/login"
        ></iframe>
      </el-tab-pane>
      <el-tab-pane label="旧版 Music" name="fourth">
        <h5>vue2 element-ui v-player...</h5>
        <iframe
          width="100%"
          height="750px"
          src="http://music.lianghj.top"
        ></iframe>
      </el-tab-pane>
      <el-tab-pane label="小兔鲜电商项目" name="second">
        <h5>vue3 pinia...</h5>
        <iframe
          width="100%"
          height="750px"
          src="http://xtx.lianghj.top/#/"
        ></iframe>
      </el-tab-pane>
      <el-tab-pane label="Music" name="five">
        <h5>vue3 pinia element-plus...</h5>
        <iframe
          width="100%"
          height="750px"
          src="https://lianghj.top/#/recommend"
        ></iframe>
      </el-tab-pane>
      <el-tab-pane label="其他项目" name="six">
        <h1>gitee: <a href="https://gitee.com/lysimportant">点击我</a></h1>
        <h1>github: <a href="https://github.com/lysimportant">点击我</a></h1>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import type { TabsPaneContext } from "element-plus";

const activeName = ref("first");

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
</script>

<style scoped lang="less">
.top-container {
  padding: 20px;
}
</style>
